<template>
  <el-dropdown trigger="click">
    <span class="el-dropdown-link" title="用户中心">
      <User :size="20" />
      <span>{{ username }}</span>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="emits('to')">个人中心</el-dropdown-item>
        <el-dropdown-item>项目地址</el-dropdown-item>
        <el-dropdown-item
          divided
          @click="emits(logout)"
        >
          退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { User } from 'lucide-vue-next'

defineProps({
  username: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['logout', 'to'])
</script>

<style lang="scss" scoped>

.el-dropdown-link {
  display: flex;
  align-items: center;
  column-gap: 8px;
  cursor: pointer;
}
</style>
